﻿<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>jTopo 入门指南</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link href="css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="js/jquery.js"></script>
	<script type="text/javascript" src="demo/js/snippet/jquery.snippet.min.js"></script>
	
	<script src="js/site.js"></script>
	<script src="js/api.js"></script>
	
	<style>
		.code {
			width: 700px;
		}	
		.demo-link{
			margin: 5px 0px 10px 300px;
		}
		li h1{
			margin-top: 5px;
		}
	</style>
	
	<script>
		$(document).ready(function(){
			$('.code').snippet("javascript",{style:"acid", showNum:false});
		});
	</script>
  </head>
  <body>
	<div id="global-nav">
		&nbsp;
	</div>
	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
			<div style="text-align:left; padding:20px 10px 0px 30px;">
				<ol>
					<li>
						<h1>Hello World!</h1>
						<pre class="code">			
			// &lt;script type="text/javascript" src="js/jtopo-min.js"></script> //引入jtopo
			var canvas = document.getElementById('canvas'); 
			var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
			var scene = new JTopo.Scene(stage); // 创建一个场景对象
			
			var node = new JTopo.Node("Hello");	// 创建一个节点
			node.setLocation(300,200);	// 设置节点坐标					
			scene.add(node); // 放入到场景中
						</pre>
						<div class="demo-link">
							<a href="demo/helloworld.html" target="_blank">在线查看效果</a>
						</div>						
					</li>					
					<li>
						<h1>节点设置</h1>
						<pre class="code">			
			var node = new JTopo.Node("Hello");	// 创建一个节点
			node.setLocation(300,200);	// 设置节点坐标					
			node.rotate = Math.random(); // 旋转角度
			node.scaleX = Math.random(); // 水平方向的缩放
			node.scaleY = Math.random(); // 垂直方向的缩放
			node.alpha = Math.random();  // 透明度
			node.setImage('host.png'); // 设置图片
						</pre>
						<div class="demo-link">
							<a href="demo/node.html" target="_blank">查看Demo效果</a>
						</div>
					</li>
					<li>
					<h1>连线</h1>
						<pre class="code">			
						
			var stage = new JTopo.Stage(canvas);
			var scene = new JTopo.Scene(stage);
			
			var nodeFrom = new JTopo.Node("from");
			nodeFrom.setLocation(200,200);
			scene.add(nodeFrom);
			
			var nodeTo = new JTopo.Node("To");
			nodeTo.setLocation(300,200);
			scene.add(nodeTo);
			
			var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
			scene.add(link);
						</pre>
						<div class="demo-link">
							<a href="demo/link.html" target="_blank">查看Demo效果</a>
						</div>
					</li>					
				</ol>
			</div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>
  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>
